<template>
  <div class="left-content">
    <div class="border details-row">
      <div class="row-col">
        <p>质检总数：{{ verificationResult.total }}</p>
      </div>
      <div class="row-col"
        ><p> 已检数：{{ verificationResult.finishCheck }}</p>
      </div>
      <div class="row-col">
        <p style="color: green">合格数：{{ verificationResult.qualified }}</p>
      </div>
      <div class="row-col">
        <p style="color: #ff0000">不合格数：{{ verificationResult.unqualified }}</p>
      </div>
    </div>
    <Row class="border-com mt1" :gutter="[12, 12]">
      <TablesCom
        :columns="leftColumn"
        :useSearchForm="true"
        :formConfig="{ schemas: leftSearchSchemas }"
        :api="getPackagedList"
        :loading="false"
        :params="{ taskId: record.task_id }"
        @success="handleSuccess"
      >
        <template #bodyCell="{ column, text, record: records }">
          <template v-if="column.dataIndex === 'boxCode'">
            <span @click="handleCell(records)" class="cellhover">{{ text }}</span>
          </template>
        </template>
        <template #action="{ rowData }">
          <TableAction
            :actions="[
              {
                label: '二维码',
                onClick: handleQrcode.bind(null, rowData),
              },
              {
                label: '删除',
                onClick: handleDel.bind(null, rowData),
              },
            ]"
          />
        </template>
      </TablesCom>
    </Row>

    <!-- 二维码弹窗 -->
    <BasicModal
      @register="registerModal"
      title="二维码查看"
      cancelText="关闭"
      @ok="printHtml('qrcode')"
      width="700px"
      okText="打印"
    >
      <Spin :spinning="spinning">
        <QrcodeHtml
          ref="qrcodeRef"
          :qrCodeData="qrCodeData"
          :modalInfoList="modalInfoList"
          id="qrcode"
        />
      </Spin>
    </BasicModal>
  </div>
</template>

<script setup lang="ts">
  import { ref, onBeforeMount, nextTick } from 'vue';
  import { Row, Spin } from 'ant-design-vue';
  import { leftColumn, leftSearchSchemas } from '../index.data';
  import { getPackagedList, getCountResult, getBoxQrCodeMsg, deleteBox } from '/@/api/jd/water-box';
  import TablesCom from './TablesCom.vue';
  import { TableAction } from '/@/components/Table';

  import { BasicModal, useModal } from '/@/components/Modal';
  import { CommonParam, UpToStandard } from '../types';
  import { useMessage } from '/@/hooks/web/useMessage';
  import QrcodeHtml from './qrcode-html.vue';
  import { printHtml } from '../hooks/printjs';

  const $props = defineProps({
    record: {
      type: Object,
      default: () => {},
    },
    userName: {
      type: String,
      default: '',
    },
  });

  const $emit = defineEmits(['watch']);

  const verificationResult = ref<UpToStandard>({});
  const qrCodeData = ref<any>({});
  const spinning = ref<boolean>(false);
  const modalInfoList = ref<CommonParam[]>([]);
  const qrcodeRef = ref<any>(null);
  const { createMessage } = useMessage();
  let restApi;
  // 获取检定统计
  const getVerificationResult = async () => {
    verificationResult.value = await getCountResult({ taskId: $props.record.task_id });
  };

  // 获取二维码数据
  const getQrcodeData = async (boxId) => {
    spinning.value = true;
    qrCodeData.value = await getBoxQrCodeMsg(boxId);
    modalInfoList.value = [
      { title: '箱号', value: qrCodeData.value.boxCode },
      // { title: '检定员', value: qrCodeData.value.userName },
      { title: '编箱日期', value: qrCodeData.value.buildBoxTime },
      { title: '水表口径', value: qrCodeData.value.caliber },
      // { title: '本批次数量', value: qrCodeData.value.totalNumber },
      { title: '一箱数量', value: qrCodeData.value.boxNumber },
    ];
    spinning.value = false;
  };

  onBeforeMount(() => {
    getVerificationResult();
  });

  const [registerModal, { openModal }] = useModal();

  const handleCell = (val) => {
    $emit('watch', val);
  };

  const handleQrcode = (val) => {
    getQrcodeData(val.boxId);
    openModal(true);
  };

  const resetData = () => {
    getVerificationResult();
    restApi.reload();
  };

  const handleSuccess = async (val) => {
    restApi = val;
    await nextTick();
    restApi && restApi?.searchForm({ createBy: $props.userName });
  };

  const handleDel = async (data: any) => {
    const { taskId, boxId, boxCode } = data;
    await deleteBox({ taskId, boxId, boxCode });
    createMessage.success('操作成功');
    restApi.reload();
  };

  defineExpose({ resetData, getVerificationResult });
</script>

<style lang="less" scoped>
  .left-content {
    width: 30%;
    height: 100%;
    padding: 12px;

    :deep(.vben-basic-table-form-container) {
      .ant-form {
        margin-bottom: 0 !important;
      }
    }

    :deep(.vben-basic-table-form-container .ant-table-wrapper) {
      padding-top: 0 !important;
    }

    .border-com {
      border: 1px solid #f0f0f0;
      border-radius: 4px;
      box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.1);
    }

    .mt1 {
      margin-top: 1em;
    }

    .border {
      .border-com;
      padding: 4px 12px;
      overflow-y: auto;
    }

    .details-row {
      display: flex;
      flex-wrap: wrap;
      margin-left: -6px;
      margin-right: -6px;

      .row-col {
        width: 50%;
        padding: 4px 0;
      }
    }
  }

  .cellhover {
    cursor: pointer;

    &:hover {
      color: #368fff;
    }
  }

  .qr-code-content {
    display: flex;
    align-items: center;
    justify-content: center;

    .qr-code-title {
      width: 1em;
    }
  }
</style>
